<template>
  <v-container class="player-container" fluid grid-list-md>
    <v-layout row wrap>
      <v-flex d-flex md12>
        <v-layout row wrap>
          <v-flex d-flex md12>
            <v-layout row wrap>
              <v-flex d-flex>
                <!-- v-flex自动设置子元素获得flex: 1 1 auto; 即 flex-grow: 1; flex-shrink: 1; flex-basis: auto; -->
                <v-flex md2 sm1>
                  <v-text-field name="queryInput" label="玩家ID" v-model="queryForm.lftid"></v-text-field>
                </v-flex>
                <v-flex md2 sm1>
                  <v-text-field name="queryInput" label="昵称" v-model="queryForm.nickname"></v-text-field>
                </v-flex>
                <v-flex md1 sm1>
                  <v-btn @click="search" dark color="blue" class="mt-2">
                    <v-icon>search</v-icon>
                    <span class="pl-2 subheading">搜索</span>
                  </v-btn>
                </v-flex>
              </v-flex>
            </v-layout>
          </v-flex>
          <v-flex d-flex md12>
            <v-layout row wrap>
              <v-flex d-flex md12>
                <v-layout row wrap>
                  <v-flex row>
                    <!-- 查询数据表格 -->
                    <v-data-table :loading="false" :headers="headers" :items="tableData" hide-actions class="elevation-1">
                      <v-progress-linear slot="progress"  color="teal" height="5"  v-if="showProgress" indeterminate></v-progress-linear>
                      <template slot="items" slot-scope="props">
                        <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
                        <td class="text-xs-center">
                          <v-avatar size="36">
                            <img :src="props.item.headUrl" alt="">
                          </v-avatar>
                        </td>
                        <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
                        <td class="text-xs-center subheading">{{ props.item.proxyLevel | ProxyLevel }}</td>
                        <td class="text-xs-center subheading">{{ props.item.createTime }}</td>
                        <td class="text-xs-center subheading">{{ props.item.sofarTopup }}</td>
                        <td class="text-xs-center subheading">
                          <v-edit-dialog :return-value.sync="props.item.gems" large lazy cancel-text="取消" save-text="保存" @save="saveGems(props.item)">
                            <div>{{ props.item.gems }}</div>
                            <div slot="input" class="mt-3 title">修改钻石数</div>
                            <v-text-field slot="input" v-model="props.item.gems" :rules="[max25chars]" label="编辑" single-line counter autofocus></v-text-field>
                          </v-edit-dialog>
                        </td>
                        <td class="text-xs-center">
                          <v-btn flat round dark color="green" class="mx-1" @click="playerTopup(props.item)">
                            <span class="mx-1">充值记录</span>
                            <v-icon color="green">monetization_on</v-icon>
                          </v-btn>
                          <v-btn flat round dark color="red" class="mx-1" @click="playerDetails(props.item)">
                            <span class="mx-1">玩家详情</span>
                            <v-icon color="red">more</v-icon>
                          </v-btn>
                        </td>
                      </template>
                      <!-- 没有数据时显示的提示 -->
                      <template slot="no-data">
                        <div class="text-md-center">
                          <v-icon color="yellow darken-3">warning</v-icon>
                          <span class="subheading">暂无数据</span>
                        </div>
                      </template>
                    </v-data-table>
                    <!-- 表格显示分页 -->
                    <div class="text-xs-center my-2">
                      <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
                    </div>
                    <v-layout>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as player from "../../api/player";
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    dialogTitle: "充值记录",
    queryTypes: [
      {
        value: 1,
        title: "玩家ID"
      },
      {
        value: 2,
        title: "昵称"
      }
    ],
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    queryForm: {
      lftid: '',
      nickname: ''
    },
    startDate: "",
    endDate: '',
    chosenDate: "选择日期",
    toggleDialog: true,
    tabs: null,
    tableData: [],
    topupData: [],
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "proxyLevel", align: "center", sortable: false },
      { text: "注册时间", value: "createTime", align: "center", sortable: false },
      { text: "累计充值", value: "sofarTopup", align: "center", sortable: true },
      { text: "当前钻石", value: "gems", align: "center", sortable: true },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    topupHeaders: [
      { text: "ID", value: "lftid", align: "left" },
      { text: "昵称", value: "nickname", align: "left" },
      { text: "充值额度", value: "sofarTopup", align: "left" },
      { text: "充值时间", value: "topupTime", align: "left" }
    ],
    playerObj: {
      headUrl: 0,
      lftid: 169502,
      nickname: 'Lambogini',
      telephone: 1692021544,
      gender: 0,
      gems: 50,
      region: 430104,
      superId: 0,
      saleLevel: 1,
      createTime: "2018-4-19",
      saleLevelText: '高级业务员'
    },
    max25chars: (v) => v.length <= 7 || '输入数字太大!',
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getRoomDetails();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getRoomDetails();
      });
    });
  },
  created() {
    this.initialize();
  },
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "New Item" : "Edit Item";
    }
  },
  watch: {
  },
  methods: {
    initialize() {
      this.tableData = [
        {
          lftid: 152600,
          nickname: '沧海',
          telephone: 4.0,
          superId: 0,
          proxyLevel: 1,
          gems: 888,
          sofarTopup: 140,
          createTime: "2018-4-19",
          headUrl: 'https://vuetifyjs.com/static/apple-touch-icon-180x180.png'
        },
        {
          lftid: 163001,
          nickname: '江流',
          telephone: 4.3,
          superId: 0,
          proxyLevel: 2,
          gems: 502,
          sofarTopup: 666,
          createTime: "2018-4-19",
          headUrl: 'https://vuetifyjs.com/static/apple-touch-icon-180x180.png'
          
        },
        {
          lftid: 163001,
          nickname: '4yen',
          telephone: 4.3,
          superId: 0,
          proxyLevel: 0,
          gems: 502,
          sofarTopup: 666,
          createTime: "2018-4-19",
          headUrl: 'https://vuetifyjs.com/static/apple-touch-icon-180x180.png'
          
        },
        {
          lftid: 163001,
          nickname: '夏木',
          telephone: 4.3,
          superId: 0,
          proxyLevel: 0,
          gems: 502,
          sofarTopup: 666,
          createTime: "2018-4-19",
          headUrl: 'https://vuetifyjs.com/static/apple-touch-icon-180x180.png'
          
        }
      ];
      this.topupData = [
        {
          lftid: 6.0,
          nickname: 24,
          sofarTopup: 140,
          topupTime: "2018-4-19"
        }
      ];
    },
    // 玩家充值记录查询
    playerTopup(item) {
      // this.toggleDialog = true;
      // this.editedIndex = this.tableData.indexOf(item);
      // this.editedItem = Object.assign({}, item);
      // this.dialog = true;
      this.$router.push(`/player/playertopup/:${item.lftid}`)
    },
    // 玩家详情查询
    playerDetails(item) {
      // this.toggleDialog = false;
      // const index = this.tableData.indexOf(item);
      // this.dialog = true;
      this.$router.push(`/player/playerdetails/:${item.lftid}`)
    },
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.tableData[this.editedIndex], this.editedItem);
      } else {
        this.tableData.push(this.editedItem);
      }
      this.close();
    },
    search() {},
    pageChange(page) {
      console.log(page)
    },
    saveGems(item) {
      console.log(item)
    }
  }
};
</script>

<style lang="less" scoped>

.card__media {
  background: url('../../img/app/md-wallpaper-3.jpg')
}
</style>

